<template>
    <div class="tnumber">
        <div class="item">
            <div>本月游泳人数</div>
            <dv-digital-flop class="numb" :config="config"></dv-digital-flop>
        </div>
        <div class="item">
            <div>本月准备游泳人数</div>
            <dv-digital-flop class="numb" :config="config"></dv-digital-flop>
        </div>
        <div class="item">
            <div>近十日游泳人数</div>
            <dv-digital-flop class="numb" :config="config"></dv-digital-flop>
        </div>
        <div class="item">
            <div>近十日准备游泳人数</div>
            <dv-digital-flop class="numb" :config="config"></dv-digital-flop>
        </div>
    </div>
</template>

<script setup lang="ts">
const config = reactive({
    number: [111],
    content: '{nt}个',
    style: {
        fill: 'red'
    }
})
</script>

<style lang="scss" scoped>
.tnumber {
    display: flex;
    justify-content: space-around;
    align-content: center;
    width: 100%;

    .numb {
        width: 100px;
        height: 100px;
    }

    .item {
        margin: 10px;
        background-color: rgba(120,255,255);
    }
}
</style>